---
layout: default
title: Basic Shuffle Demo
description: A basic demo using shuffle with a masonry layout. This example also uses a sizer element.
image: /demos/basic.jpg
bodyClass: basic
extraJS: [ "demos/homepage.js" ]
---
<div class="container">
  <div class="row">
    <h2>Masonry with a sizer</h2>
  </div>
</div>


<div class="container">
  <div id="grid" class="row my-shuffle-container">
    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
    <div class="col-1@sm col-1@xs my-sizer-element"></div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>Source code for this demo</h2>
      <p>This demo uses the same code as the home page (with the filters).</p>
      <p>Link to <a href="{{ site.baseurl }}/js/demos/homepage.js">demo source</a></p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>Shuffle.js</h2>
      <p>{{ site.longDescription }}</p>
    </div>
  </div>
</div>
